import React, { useState, useEffect } from 'react';



import { role_list } from '../../../utils/api'

import { Input, Button, Space, Table } from 'antd';
var { Search } = Input;
function RoleManager(props) {

 
    //表格数据
    var [data, setData] = useState([])
    //最新页码
    var [current, setCurrent] = useState(1)
    //总数
    var [total, setTotal] = useState(1)
    //每页条数
    var [pageSize, setPageSize] = useState(10)


    // 引入生命周期
    useEffect(() => {
        //获取角色列表
        role_list().then((res) => {
            console.log(res.data.list);
            setData(res.data.list)
        })
    }, [])
    // 表格列信息
    const columns = [
        {
            title: '角色名称', //表格头
            dataIndex: 'name', //表格列的数据索引
            key: 'name',
        },

        {
            title: '角色类型',
            dataIndex: 'name',
            key: 'type',
        },
        {
            title: '描述',
            dataIndex: 'desc',
            key: 'desc',
        },
        {
            title: '操作',
            key: 'action',
            render: (text) => (
                <Space size="middle">
                    <i className='iconfont icon-bianji' ></i>
                    <i className='iconfont icon-shanchu'></i>
                </Space>
            ),
        },
    ];



    return (
        <div className='manager'>
            <h2>员工管理</h2>
            <div className='search'>
                <Search
                    placeholder="输入员工姓名"
                    style={{ width: 320 }}
                    enterButton
                />
                <Button className='btn' type="primary">新增客服</Button>
            </div>
            {/* 表格 */}
            <Table columns={columns} dataSource={data} pagination={{ current, pageSize, total }} />

        </div>
    );
}

export default RoleManager;